<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>星空·温馨提示</title>

  <style>

    * { margin: 0; padding: 0; }

    body {

      width: 100vw;

      height: 100vh;

      background: #000;

      overflow: hidden;

      cursor: pointer;

      font-family: sans-serif;

      display: flex;

      justify-content: center;

      align-items: center;

    }

    .star {

      position: absolute;

      background: #fff;

      border-radius: 50%;

      pointer-events: none;

      animation: twinkle 2s infinite alternate;

    }

    .falling-star {

      position: absolute;

      background: #fff;

      border-radius: 50%;

      pointer-events: none;

      animation: fall 8s linear infinite;

      box-shadow: 0 0 3px rgba(255,255,255,0.6);

    }

    .meteor {

      position: absolute;

      background: linear-gradient(90deg, #fff, rgba(255,255,255,0.1));

      border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;

      pointer-events: none;

      animation: meteor-fall 2s linear infinite;

      transform-origin: right center;

    }

    .note {

      position: absolute;

      padding: 8px 12px;

      border-radius: 6px;

      color: #333;

      font-size: 14px;

      box-shadow: 0 2px 5px rgba(255,255,255,0.2);

      z-index: 10;

      transition: opacity 0.5s ease, transform 0.5s ease;

    }

    /* 初始点击提示标签：居中显示，醒目样式 */

    .click-hint {

      position: absolute;

      color: #fff;

      font-size: 20px;

      padding: 12px 24px;

      border: 2px solid #fff;

      border-radius: 10px;

      z-index: 20;

      transition: opacity 0.5s ease, transform 0.5s ease;

    }

    /* 最终文字：放大尺寸，增强视觉 */

    .final-text {

      position: absolute;

      color: #ff3333;

      font-size: 32px; /* 字体放大（原24px） */

      font-weight: bold;

      text-shadow: 0 0 8px rgba(255,51,51,0.7); /* 阴影增强 */

      z-index: 100;

      opacity: 0;

      transition: opacity 0.5s ease;

    }

    @keyframes twinkle {

      0% { opacity: 0.4; }

      100% { opacity: 1; }

    }

    @keyframes fall {

      0% { transform: translateY(-50px); opacity: 1; }

      100% { transform: translateY(100vh); opacity: 0; }

    }

    @keyframes meteor-fall {

      0% {

        transform: translateX(50vw) translateY(-30px) rotate(-45deg) scale(0);

        opacity: 0;

      }

      5% {

        transform: translateX(35vw) translateY(10px) rotate(-45deg) scale(1);

        opacity: 0.8;

      }

      95% { opacity: 0.8; }

      100% {

        transform: translateX(-35vw) translateY(55vh) rotate(-45deg) scale(1);

        opacity: 0;

      }

    }

  </style>

</head>

<body>

  <!-- 1. 初始点击提示标签：默认显示，点击后消失 -->

  <div class="click-hint" id="clickHint">点一下屏幕开始</div>

  <!-- 2. 最终文字：修改为“记得每天都要开心啦” -->

  <div class="final-text" id="finalText">记得每天都要开心啦</div>



  <script>

    const noteTexts = [

"要按时吃饭哦，别让胃空着委屈自己",

"睡前记得泡个脚，好梦会如约而至",

"你笑起来的时候，眼睛里有星星呢",

"不管遇到什么，我都在你身后支持你",

"别熬夜啦，不然身体不好",

"希望你每一天都能收获小惊喜",

"你是独一无二的，要好好爱自己",

"累了就歇一歇，我给你加油打气",

"你的每一点进步，我都为你感到骄傲",

"要一直保持这份可爱与善良呀",

"想和你一起吃好多好多顿饭，聊好多好多天",

"你在我心里，永远是最特别的存在",

"今天的你，有什么小收获吗？",

"今天有没有什么让你觉得治愈的瞬间？",

"今天的你，有好好享受生活吗？",

"今天的小目标，达成了吗？",

"今天有没有遇到什么有趣的事儿？",

"今天的你，有没有被自己可爱到？",

"今天的你，有没有好好犒劳自己？",

"今天的风，有没有带给你好心情？",

"今天过得开心嘛",

"要记得好好吃饭",

"多喝热水别着凉",

"累了就歇会儿呀",

"今天也超棒的",

"别忘记微笑哦",

"愿你被温柔以待",

"慢慢来，不着急",

"今天有小收获吗",

"保持好心情呀"

    ];

    const noteColors = [

      "#fde0e0", "#e0fde0", "#e0e0fd", 

      "#fdfde0", "#fde0fd", "#defff0"

    ];

    let isRunning = false;

    const finalText = document.getElementById("finalText");

    const clickHint = document.getElementById("clickHint"); // 获取点击提示标签

    const usedNotePositions = [];

    let currentNoteCount = 0;



    // 点击整个屏幕触发效果（先隐藏提示标签，再启动动画）

    document.body.addEventListener("click", () => {

      if (!isRunning) {

        isRunning = true;

        clickHint.style.opacity = "0"; // 隐藏点击提示

        clickHint.style.transform = "scale(0.9)";

        setTimeout(() => clickHint.remove(), 500); // 动画结束后移除标签



        // 启动星空与便签逻辑

        createStaticStars(180);

        startFallingStars();

        startNoteSequence();

      }

    });



    // 便签按顺序弹出（单独拆分，逻辑更清晰）

    function startNoteSequence() {

      noteTexts.forEach((text, index) => {

        setTimeout(() => {

          createNoteAvoidOverlap(text);

          currentNoteCount++;



          // 显3删1逻辑

          if (currentNoteCount >= 3) {

            removeOldestNote();

            currentNoteCount--;

          }



          // 所有便签结束后流程

          if (index === noteTexts.length - 1) {

            setTimeout(() => {

              clearAllNotes();

              startMeteorsFor6s();

              setTimeout(() => {

                finalText.style.opacity = "1"; // 显示放大后的最终文字

              }, 6000);

            }, 1000);

          }

        }, index * 500);

      });

    }



    // 生成基础闪烁星星

    function createStaticStars(count) {

      for (let i = 0; i < count; i++) {

        const star = document.createElement("div");

        star.className = "star";

        const size = 1 + Math.random() * 0.5;

        star.style.width = size + "px";

        star.style.height = size + "px";

        star.style.left = Math.random() * 100 + "vw";

        star.style.top = Math.random() * 100 + "vh";

        star.style.animationDelay = Math.random() * 3 + "s";

        document.body.appendChild(star);

      }

    }



    // 普通下落星星

    function startFallingStars() {

      createSingleFallingStar();

      setInterval(createSingleFallingStar, 1500);

    }

    function createSingleFallingStar() {

      const star = document.createElement("div");

      star.className = "falling-star";

      const size = 1 + Math.random() * 0.5;

      star.style.width = size + "px";

      star.style.height = size + "px";

      star.style.left = Math.random() * 100 + "vw";

      star.style.top = "-10px";

      star.style.animationDuration = 7 + Math.random() * 3 + "s";

      document.body.appendChild(star);

      setTimeout(() => star.remove(), 10000);

    }



    // 6秒流星雨

    function startMeteorsFor6s() {

      const meteorInterval = setInterval(() => {

        const meteorCount = 4 + Math.floor(Math.random() * 2);

        for (let i = 0; i < meteorCount; i++) {

          setTimeout(() => {

            createSingleMeteor();

          }, i * 200);

        }

      }, 500);



      setTimeout(() => {

        clearInterval(meteorInterval);

      }, 6000);

    }

    function createSingleMeteor() {

      const meteor = document.createElement("div");

      meteor.className = "meteor";

      const height = 1 + Math.random() * 0.5;

      const length = height * 10;

      meteor.style.width = length + "px";

      meteor.style.height = height + "px";

      meteor.style.top = Math.random() * 15 + 5 + "vh";

      meteor.style.animationDuration = 1.8 + Math.random() * 0.7 + "s";

      document.body.appendChild(meteor);

      setTimeout(() => meteor.remove(), 2500);

    }



    // 防重叠生成便签

    function createNoteAvoidOverlap(text) {

      const noteWidth = 120;

      const noteHeight = 40;

      let newLeft, newTop;

      let isOverlap = true;



      for (let i = 0; i < 10 && isOverlap; i++) {

        newLeft = Math.random() * (window.innerWidth - noteWidth);

        newTop = Math.random() * (window.innerHeight - noteHeight);

        isOverlap = false;



        usedNotePositions.forEach(pos => {

          const overlapX = newLeft < pos.left + noteWidth && newLeft + noteWidth > pos.left;

          const overlapY = newTop < pos.top + noteHeight && newTop + noteHeight > pos.top;

          if (overlapX && overlapY) {

            isOverlap = true;

          }

        });

      }



      const note = document.createElement("div");

      note.className = "note";

      note.innerText = text;

      note.style.backgroundColor = noteColors[Math.floor(Math.random() * noteColors.length)];

      note.style.left = newLeft + "px";

      note.style.top = newTop + "px";

      document.body.appendChild(note);

      usedNotePositions.push({ left: newLeft, top: newTop });

    }



    // 删除最早的便签

    function removeOldestNote() {

      const allNotes = document.querySelectorAll(".note");

      if (allNotes.length > 0) {

        const oldestNote = allNotes[0];

        oldestNote.style.opacity = "0";

        oldestNote.style.transform = "scale(0.8)";

        setTimeout(() => {

          oldestNote.remove();

          usedNotePositions.shift();

        }, 500);

      }

    }



    // 清除所有便签

    function clearAllNotes() {

      const allNotes = document.querySelectorAll(".note");

      allNotes.forEach(note => {

        note.style.opacity = "0";

        note.style.transform = "scale(0.8)";

        setTimeout(() => note.remove(), 500);

      });

      usedNotePositions.length = 0;

      currentNoteCount = 0;

    }

  </script>

</body>

</html>